<!--
 * @Author: MrLee
 * @Date: 2024-08-24 08:55:14
 * @LastEditors: MrLee
 * @LastEditTime: 2024-08-24 11:40:26
 * @Description: 请填写简介
-->
<template>
    <custom-navbar title="机会来了" :autoBack="true" leftIconColor="#303133" />
    <up-gap height="30rpx" />
    <view class="my-50rpx text-[30rpx] text-[#1d2129] flex items-center ml-56rpx">待处理机会<view
            class="text-[#1F50F2] mx-[8rpx]">{{dataCount}}</view>个</view>


    <swiper :current="current" previousMargin="30" nextMargin="30" @swiper="onSwiper" @change="onSlideChange" style="height: calc(100vh - 420rpx);">
        <swiper-item  v-for="(item, index) in res" :key="index">
            <view
            :style="{transform:current == index?'1':'scale(0.92)',height:'100%'}"
            class=" w-100%;bg-#fff; box-border;job-item bg-#fff px-40rpx py-24rpx shadow-[0px_6px_16px_0px_rgba(191,191,191,0.26)]  rounded-[50rpx]"
            >
            <view
                class="" >

                <view class="flex items-center b-b b-b-#f6f7f8 b-b-solid pb-18rpx mb-18rpx">
                    <view class="relative mr-[20rpx]">
                        <image src="https://yiliao.test03.qcw800.com/static/images/tab/user-01.png"
                            class="block h-[20rpx] w-[20rpx] absolute rigth-0 bottom-0;" style="right: 0" />
                        <image class="w-[72rpx] h-[72rpx]" :src="item.hr_avatar" />
                    </view>
                    <view class="flex flex-col justify-between">
                        <view class="text-[26rpx] font-normal text-[#666666]">
                            {{item.hr_name}}·{{item.hr_duty}}
                        </view>
                    </view>
                </view>






                <view class="mb-14rpx flex items-center justify-between">
                    <view class="text-left text-[32rpx] text-[#1d2129]">
                        {{ item.job_name }}
                    </view>
                    <view class="text-[30rpx] text-[#1f50f2] font-semibold tracking-[-0.3rpx]">
                        {{item.salary_min}}k-{{item.salary_max}}k·{{item.salary_count}}薪
                    </view>
                </view>
                <view
                    class="mb-24rpx flex items-center text-left text-[26rpx] text-[#6e6d72] b-b b-b-#f6f7f8 b-b-solid pb-18rpx">
                    <view v-for="(itemTab, indexTab) in item.tabs" :key="indexTab"
                        class="flex items-center justify-center">
                        <view :class="itemTab.ico" class="iconfont"></view>
                        <view>{{ itemTab.label }}</view>
                        <view v-if="indexTab != item.tabs.length - 1" class="mx-10rpx h-28rpx w-2rpx bg-#6e6d72" />
                    </view>
                </view>

            </view>


<view  style="overflow-y: scroll;height: calc(100vh - 700rpx);">
    <view class="px-24rpx py-24rpx bg-#fff rounded-26rpx mt-24rpx">
        <view class="text-[#1d2129] text-[26rpx] mb-22rpx">岗位亮点</view>
        <view class="flex flex-wrap">
            <view v-for="(item,index) in item.highlights" :key="index" class="py-10rpx mr-20rpx mb-20rpx px-24rpx text-[#F57100] text-[24rpx] bg-#fcf8e9 rounded-[28rpx]">{{ item }}</view>
        </view>

        <view class="text-[#1d2129] text-[26rpx] mb-22rpx">工作内容</view>
        <view class="text-[#4e4e4e] text-[24rpx]" v-html="item.job_content">
        </view>
        <view class="text-[#1d2129] text-[26rpx] mt-22rpx mb-22rpx">任职要求</view>
        <view class="text-[#4e4e4e] text-[24rpx]" v-html="item.job_requirements">
        </view>








        <view class="h-2rpx bg-#ebebeb mt-22rpx mb-22rpx"></view>
        <!-- bg-#f7f7f7 -->
        <view class="flex items-center justify-between">
            <view class="text-[#333333] text-[24rpx] ">
                <view>法定福利、奖金补贴等</view>
                <view>请在企业主页中详细查看</view>
            </view>
            <view class="flex items-center text-[#1F50F2] text-[26rpx]"
            @click="jumpDetail(item.job_id)">
                <view>查看更多</view>
                <view class="iconfont icon-arrows-right"></view>
            </view>
        </view>
    </view>
    </view>
</view>
        </swiper-item>
    </swiper>



    <up-gap height="218rpx" />
    <view
        class="fixed flex items-center bottom-0 h-178rpx w-[100%] bg-#fff shadow-[0px_0px_12px_0px_rgba(238,239,241,0.50)]">
        <view class="px-44rpx " style="border-right: 1px solid #d6d8e0;"
        @click="onclickUserLike(2)">
            <image src="https://yiliao.test03.qcw800.com/static/images/tab/home-11.png" style="margin:0 auto"
                class="block w-32rpx h-32rpx mb-10rpx" />
            <view>不感兴趣</view>
        </view>
        <view class="px-44rpx"
        @click="onclickUserLike(1)">
            <image src="https://yiliao.test03.qcw800.com/static/images/tab/home-11.png" style="margin:0 auto"
                class="block w-32rpx h-32rpx mb-10rpx" />
            <view>感兴趣</view>
        </view>
        <view
            class="mx-auto my-0 mt-[24rpx] h-82rpx w-[40%] rounded-[42rpx] bg-#1f50f2 text-center text-[30rpx] text-white font-medium leading-[82rpx]">
            立即沟通
        </view>
    </view>
</template>
<script setup lang="ts">
// import userCatch01 from "@/static/images/tab/user-catch-01.png";
import { userJobInteractionList, userJobInteractionUpdate } from "@/api/user";
  const userCatch01 = 'https://yiliao.test03.qcw800.com/static/images/tab/user-catch-01.png'
let jobList = reactive([
    {
        title: "前端工程师",
        tabs: [
            {
                label: "北京·海淀区",
                ico: "icon-a-zu121328_1",
            },
            {
                label: "实习",
                ico: "icon-a-zu121326_1",
            },
            {
                label: "本科 硕士",
                ico: "icon-a-zu121327_1",
            },
        ],
        companyInfo: {
            name: "中国银行",
            logoUrl: userCatch01,
            manager: "杨女士·招聘主管",
        },
    },
    {
        title: "前端工程师",
        tabs: [
            {
                label: "北京·海淀区",
                ico: "icon-a-zu121328_1",
            },
            {
                label: "实习",
                ico: "icon-a-zu121326_1",
            },
            {
                label: "本科 硕士",
                ico: "icon-a-zu121327_1",
            },
        ],
        companyInfo: {
            name: "中国银行",
            logoUrl: userCatch01,
            manager: "杨女士·招聘主管",
        },
    },
    {
        title: "前端工程师",
        tabs: [
            {
                label: "北京·海淀区",
                ico: "icon-a-zu121328_1",
            },
            {
                label: "实习",
                ico: "icon-a-zu121326_1",
            },
            {
                label: "本科 硕士",
                ico: "icon-a-zu121327_1",
            },
        ],
        companyInfo: {
            name: "中国银行",
            logoUrl: userCatch01,
            manager: "杨女士·招聘主管",
        },
    }
]);
let jobInfoTag = reactive(['五险一金', '高温补贴', '五险一金', '五险一金', '高温补贴', '五险一金'])


let current = ref(0)
const internalPush = () => {
    uni.navigateTo({
        url: '/pages/common/internal-push/index',
    });
}

const onSlideChange = (v) =>{
    current.value = v.detail.current
}
const dataCount = ref(0);
const res:any = reactive([]);
async function getJobInterationList() {
  let result = await userJobInteractionList({like: 0, like_hr: 1});
  console.log('机会来了 res list:::', result);

  //vue3传递result的值到子组件JobList中的属性jobList中
  for (let i = 0; i < result.list.length; i++) {
    if (i == 0) {dataCount.value = result.count;}
    const r = result.list[i]
    let rr:any = {
      job_name: r.job.name,
      job_id: r.job.id,
      salary_min: r.job.salary_min,
      salary_max: r.job.salary_max,
      salary_count: r.job.salary_count,
      province: r.job.province.name,
      city: r.job.city.name,
      job_nature: r.job.nature,
      job_content: r.job.job_content,
      job_requirements: r.job.job_requirements,
      qualifications: '',
      highlights: r.job.highlights,
      company_id: r.job.company.id,
      company_logo: r.job.company.url_logo,
      company_name: r.job.company.name,
      company_type: r.job.company.type == 1 ? '民营': r.job.company.type == 2 ? '国企' : '合资',
      company_listed: r.job.company.listed == 1 ? '未上市': '上市',
      like: r.like,
      hr_avatar: r.job.user.avatar,
      hr_name: r.job.user.name,
      hr_duty: r.job.user.hr.duty.name,
      hr_id: r.job.user.id,
    }
    let qualifications = ''
    for (let j = 0; j < r.job.qualifications.length; j++) {
      qualifications += r.job.qualifications[j] + ' '
    }
    rr.qualifications = qualifications
    rr.tabs = [
      {
        label: rr.province + '·' + rr.city,
        ico: "icon-a-zu121328_1"
      },
      {
        label: rr.job_nature,
        ico: "icon-a-zu121326_1"
      },
      {
        label: rr.qualifications,
        ico: "icon-a-zu121327_1"
      }
    ]
    res.push(rr)
  }
}

onLoad(() => {
    getJobInterationList();
});

const jumpDetail = (position_id : number) => {
  uni.navigateTo({
    url: '/pages/common/position-detail/index?job_id=' + position_id
  });
}

const onclickUserLike = async (type: number) => {
  console.log('修改职位互动type:::', type, ' job_id:::', res[current.value].job_id);
  const result = await userJobInteractionUpdate({
    like: type,
    job_id: res[current.value].job_id,
  });
  console.log('修改职位互动result:::', result);
  res.splice(current.value);
  dataCount.value--;
}

</script>
